<div class="body">
  <div class="body_resize">
    <div class="left">
      <h1><small>Ingresar una nueva dirección</small></h1>

      <% form_for(@direccion) do |f| %>
        <%= f.error_messages %>

        <p>
          <%= f.label :nombre %><br />
          <%= f.text_field :nombre %>
        </p>
        <p>
          <%= f.label :residencia_calle %><br />
          <%= f.text_field :residencia_calle %>
        </p>
        <p>
          <%= f.label :apartamento_num_casa %><br />
          <%= f.text_field :apartamento_num_casa, :maxlength => 6  %>
        </p>
        <p>
          <%= f.label :urbanizacion %><br />
          <%= f.text_field :urbanizacion %>
        </p>
        <p>
          <%= f.label :ciudad %><br />
          <%= f.text_field :ciudad %>
        </p>
        <p>
          <%= f.label :pais %><br />
          <%= f.text_field :pais %>
        </p>
        <p>
          <%= f.label :codigo_postal %><br />
          <%= f.text_field :codigo_postal, :maxlength => 5 %>
        </p>
        <%= f.hidden_field :latitud %>
        <%= f.hidden_field :longitud %>
        <%= f.hidden_field :cliente_id %>


        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          var centrodelmapa = new google.maps.LatLng(10.496420232955682, -66.906738281258);
          var parliament = new google.maps.LatLng(10.496420232955682, -66.906738281258);
          var marker;
          var map;

          function initialize() {
            var mapOptions = {
              zoom: 14,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: centrodelmapa
            };

            map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

            marker = new google.maps.Marker({
              map:map,
              draggable:true,
              animation: google.maps.Animation.DROP,
              position: parliament
            });
            google.maps.event.addListener(marker, 'click', toggleBounce);
            google.maps.event.addListener(marker, 'dragend', coordinates);
          }

          function toggleBounce() {

            if (marker.getAnimation() != null) {
              marker.setAnimation(null);
            } else {
              marker.setAnimation(google.maps.Animation.BOUNCE);
            }
          }
          function coordinates() {
            var point = new google.maps.LatLng(marker.getPosition().lat(),marker.getPosition().lng(),true);
            map.panTo(point);
            document.getElementById("direccion_latitud").value = point.lat();
            document.getElementById("direccion_longitud").value = point.lng();
          }
        </script>

        <body onload="initialize()"></body>
        <center>
          <div id="map" style="width: 610px; height: 480px"></div>
          <div id="message"></div>
          <br></br>
        </center>

        <p>
          <%= f.submit 'Registrar dirección' %>  |  <%= link_to 'Regresar', direccions_path %>
        </p>
      <% end %>
    </div>
    <div class="right">
      <img src="/images/carretillaCajita.jpg" alt="" width="270" height="270" />
    </div>
    <div class="clr"></div>
  </div>
</div>